<template>
    <n-modal
        :mask-closable="false"
        :close-on-esc="false"
        :title="title"
        :show="show"
        preset="card"
        @close="close"
        :on-after-enter="init"
        :on-after-leave="destroy"
        style="width: 800px;"
    >
        <n-form
            label-width="auto"
            label-placement="left"
            ref="formRef"
            :model="form"
            :rules="rules"
        >
            <n-grid :cols="2" x-gap="2">
                <n-form-item-grid-item :span="2" label="账号" path="username" show-require-mark>
                    <n-input v-model:value="form.username" :disabled="Object.keys(props.row).length > 0"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="昵称" show-require-mark>
                    <n-input v-model:value="form.nickname"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="出生日期">
                    <n-date-picker style="width: 100%;" type="date" v-model:formatted-value="form.birthday" clearable/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="电话">
                    <n-input v-model:value="form.phone"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="邮箱">
                    <n-input v-model:value="form.email"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="状态">
                    <n-radio-group v-model:value="form.status">
                        <n-radio :label="item.name" :value="item.value" v-for="item in codeStore.getDict(Dict.Status)"/>
                    </n-radio-group>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="1" label="性别">
                    <n-radio-group v-model:value="form.gender">
                        <n-radio :label="item.name" :value="item.value" v-for="item in codeStore.getDict(Dict.Gender)"/>
                    </n-radio-group>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="2" label="地址">
                    <n-input v-model:value="form.address"/>
                </n-form-item-grid-item>
                <n-form-item-grid-item :span="2" label="备注">
                    <n-input type="textarea" v-model:value="form.remark"/>
                </n-form-item-grid-item>
            </n-grid>
        </n-form>
        <template #footer>
            <n-space justify="end">
                <n-button type="info" @click="handleConfirmOnClick">确认</n-button>
                <n-button @click="close">关闭</n-button>
            </n-space>
        </template>
    </n-modal>
</template>
<script lang="ts" setup>
import { Dict } from '@/enums'
import { reactive, toRefs, ref, PropType } from 'vue'
import { FormRules } from 'naive-ui'
import { getUserVO, postOrPutUser } from '@/api/base/user'
import { IMessage } from '@/utils/message'
import { useCodeStore } from '@/store/modules/code'

const codeStore = useCodeStore()

const state = reactive({
    form: {} as BaseUser
})

const {
    form
} = toRefs(state)

const props = defineProps({
    show: {
        type: Boolean
    },
    title: {
        type: String
    },
    row: {
        type: Object as PropType<BaseUser>,
        required: true
    }
})

const emits = defineEmits<{
    (e: 'handleCloseOnClick'): void,
    (e: 'handleSelectOnClick'): void
}>()

const formRef = ref()

const init = async () => {
    if(Object.keys(props.row).length == 0) return
    const { data } = await getUserVO(props.row.id)
    state.form = data
}

const rules: FormRules = {
    username: [
        {
            required: true,
            message: '账号必须填写'
        }
    ]
}

const handleConfirmOnClick = () => {
    formRef.value?.validate(async (errors: any) => {
        if(errors) return
        const { message } = await postOrPutUser(state.form)
        IMessage({ content: message })
        select()
        close()
    }).catch((errors: any) => {
        console.error(errors)
    })
}

const select = () => {
    emits('handleSelectOnClick')
}

const close = () => {
    emits('handleCloseOnClick')
}

const destroy = () => {
    state.form = {} as BaseUser
}

</script>